<template>
  <div class="cardList_content" style="height: 100%; overflow: auto;">
    <div v-for="item in appList" :key="item.id" :value="item.id" class="cardList float_left pointer"
         @mouseenter="showSet(item.id)" @mouseleave="hidSet">
      <div class="newApplication_item">
        <div class="iconBg" :style="item.backgroundColor!=null?'background:'+item.backgroundColor:'background:#4ec2e9'"
             @click="toDetail(item.id)">
          <ych-icon class="iconLogo" :type="item.icon!=null?item.icon:'menu-fold'"/>
          <!---->
        </div>
        <p :title="item.groupName" class="listName">{{item.groupName}}</p>
      </div>
      <div v-show="item.id==currAppId &&isShowSet" class="ovf-hd p-r-10 tx-r applicationDev_operation">
        <div class="add_application_el_dropdown el-dropdown">
          <ych-icon type="setting" @click="showDropMenu(item.id,$event)"/>
          <ul v-show="item.id==currAppId && isShowDropMenu" class="el-dropdown-menu">
            <li class="el-dropdown-menu__item" @click="editApp(item)">{{$t('m.eform.appgroup.other.edit_app') }}</li>
            <li class="el-dropdown-menu__item" @click="delApp(item.id)">{{$t('m.eform.appgroup.other.delete_app') }}</li>
            <li class="el-dropdown-menu__item" @click="exportGroup(item)">{{$t('m.eform.appgroup.other.export_app') }}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

  import { downloadFile } from '@/api/manage'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: 'ActAppCardList',
    components: {},
    props: {
      appList: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        url: {
          delete: YchConstant.PREFIX_EFORM + '/manage/actAppGroup/delete',
          exportGroup: YchConstant.PREFIX_EFORM + '/manage/actAppGroup/exportGroup'
        },
        dataSource: [],
        showCodegen: false,
        isShowSet: false,
        isShowDropMenu: false,
        currAppId: ''
      }
    },
    methods: {
      toDetail(appId) {
        this.$emit('toDetail', appId)
      },
      showSet(appId) {
        this.currAppId = appId
        this.isShowSet = true
      },
      hidSet() {
        this.currAppId = ''
        this.isShowSet = false
        this.isShowDropMenu = false
      },
      showDropMenu(appId, e) {
        this.currAppId = appId
        this.isShowDropMenu = true
        e.stopPropagation()
      },
      editApp(item) {
        this.$emit('editApp', item)
      },
      delApp(id) {
        let that = this
        this.$confirm({
          content: this.$t('m.common.tip.delete_confirm'),
          onOk() {
            that.$emit('delApp', id)
          },
          onCancel() {

          },
          okText: this.$t('m.common.button.ok'),
          cancelText: this.$t('m.common.button.cancel'),
          width: 200
        })
      },
      exportGroup(item) {
        downloadFile(this.url.exportGroup + '?groupId=' + item.id, item.groupName + '(' + item.groupCode + ').zip', {}).finally(() => {
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .float_left {
    float: left !important
  }

  .cardList {
    position: relative;
    margin: 2px 6px 2px 6px !important;
    width: 135px;
    height: 140px;
    border-radius: 12px;
  }

  .cardList .cardList_pic {
    position: absolute;
    top: 20px;
    right: 0;
    left: 0;
    display: inline-block;
    margin: auto;
    width: 80px;
    height: 80px;
    border-radius: 18px
  }

  .cardList.is_access {
    background-color: #f5f5f5
  }

  .cardList.cardList_cover_full {
    margin-right: 20px;
    background-color: #fff
  }

  .cardList:hover {
    background-color: #f5f5f5
  }

  .cardList:hover img {
    border: 1px solid #ddd
  }

  .cardList_content {
    overflow-y: auto;
    width: 100%;
    height: 100%;
  }

  .cardList_content .newApplication_item {
    position: relative;
    padding: 20px 0px 0px 0px;
    width: 130px;
    height: 140px
  }

  .cardList_content .newApplication_item .iconBg {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    width: 80px;
    height: 80px;
    border-radius: 18px
  }

  .cardList_content .newApplication_item .iconBg .iconLogo {
    color: #fff;
    font-size: 28px
  }

  .cardList_content .newApplication_item .iconBg .unpublished {
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
    overflow: hidden;
    padding: 2px 0;
    width: 80px;
    color: #fafafa;
    text-align: center;
    font-size: 12px
  }

  .cardList_content .newApplication_item .iconBg .unpublished .shadow {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 80px;
    height: 45px;
    border-radius: 50%;
    background: hsla(0, 0%, 100%, .2)
  }

  .cardList_content .newApplication_item .listName {
    position: relative;
    white-space: nowrap;/*内容超宽后禁止换行显示*/
    overflow: hidden;
    text-overflow:ellipsis;/*文字超出部分以省略号显示*/
    margin-top: 15px;
    padding-right: 1em;
    padding-left: 1em;
    max-height: 2.3em;
    color: #333;
    text-align: center;
    word-break: break-all;
    font-size: 14px;
    line-height: 1.2em
  }


  .common_bg_red {
    background: #f56262
  }

  .common_bg_orange {
    background: #ffa940
  }

  .common_bg_yellow {
    background: #f5c547
  }

  .common_bg_green {
    background: #52ce87
  }

  .common_bg_cambridgeBlue {
    background: #4ec2e9
  }

  .common_bg_darkBlue {
    background: #409eff
  }

  .common_bg_purple {
    background: #ac91ec
  }

  .common_bg_grey {
    background: #999
  }

  .common_color_red {
    color: #f56262
  }

  .common_color_orange {
    color: #ffa940
  }

  .common_color_yellow {
    color: #f5c547
  }

  .common_color_green {
    color: #52ce87
  }

  .common_color_cambridgeBlue {
    color: #4ec2e9
  }

  .common_color_darkBlue {
    color: #409eff
  }

  .common_color_purple {
    color: #ac91ec
  }

  .applicationDev_operation {
    position: absolute;
    top: 0;
    margin-top: 10px;
    padding: 0 10px;
    width: 100%
  }

  .p-r-10 {
    padding-right: 10px !important
  }

  .el-dropdown-menu {
    cursor: pointer;
    width: 90px;
    text-align: center;
    background-color: #FEFEFE;
    z-index: 100;
    padding: 0px;
  }

  .el-dropdown-menu li {
    list-style-type: none;
  }

  .el-dropdown-menu__item {
    margin: 0;
    font-size: 14px;
    color: #606266;
    cursor: pointer;
    outline: 0
  }

  .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: #ecf5ff;
    color: #66b1ff
  }

</style>
